<template>
    <div>
      <el-card
        shadow="always"
        :body-style="{ padding: '20px' }"
        v-show="scene === 1"
      >
        <el-row :gutter="20">
          <el-col :span="1" :offset="0">
            <el-button type="primary" size="default" @click="addteacherlist" :disabled="isoktockick"
              >添加</el-button
            >
          </el-col>
          <el-col :span="1" :offset="0">
            <el-button
              type="primary"
              size="default"
              @click="byidgetlistdata(backid)"
              >查询</el-button
            >
          </el-col>
          <el-col :span="8" :offset="0">
            <el-input
              v-model="backid"
              placeholder="查询用户编号.."
              size="normal"
              clearable
              @change="changeinput"
            ></el-input>
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="listdata" border stripe v-show="scene === 1" >
        <el-table-column type="index" prop="col.id" label="序号" :width="80">
        </el-table-column>
        <el-table-column prop="col.id" label="用户编号" width="120">
          <template slot-scope="{ row, $index }">
            <div>
              {{ row.backid }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="功能异常类型" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              {{ row.violation }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="联系方式" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              {{ row.tel }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="col.id" label="描述" width="width">
          <template slot-scope="{ row, $index }">
            <div class="truncate">
              {{ row.description }}
            </div>
          </template>
        </el-table-column>
  
        <el-table-column prop="col.id" label="照片" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <img :src="baseurl+row.imgurl1" style="width: 120px; height: 120px" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <div>
              <el-button
                v-show="! (row.isbackmeg ==='0')"
                type="success"
                size="mini"
                icon="el-icon-finished"
                circle
                :disabled="! (row.isbackmeg ==='0')"
                @click="downdatashop(row)"
              ></el-button>
              <el-button
                v-show=" (row.isbackmeg === '0')"
                type="danger"
                size="mini"
                icon="el-icon-refresh-left"
                circle
                @click="updatashop(row)"
              ></el-button>
  
              <el-button
                type="warning"
                size="mini"
                circle
                icon="el-icon-edit"
                @click="showshopdetail(row)"
              ></el-button>
              <el-button
                type="info"
                size="mini"
                circle
                icon="el-icon-info"
                @click="maintenance(row)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                circle
                icon="el-icon-delete"
                @click="deletebut(row)"
              >
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
  
      <el-drawer
        style="font-size: 30px; color: #000"
        title="用户反馈详情:"
        :visible.sync="drawer"
        :direction="direction"
        size="50%"
        :before-close="handleClose"
      >
        <el-row>
          <el-col :span="5">用户编号</el-col>
          <el-col :span="16" >
            {{ showparentdata.backid }}</el-col
          >
        </el-row>
  
        <el-row>
          <el-col :span="5">功能类型</el-col>
          <el-col :span="16" style="color: #ff0a0a">
          {{ showparentdata.violation }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="5">描述</el-col>
          <el-col :span="16" style="color: #ff0a0a">
            {{ showparentdata.description }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="5">联系方式</el-col>
          <el-col :span="16" >
            {{ showparentdata.tel }}</el-col
          >
        </el-row>
        <el-row>
        <el-col :span="5">平台回复</el-col>
        <el-col :span="16" v-if="showparentdata.backcontent ===''? 0:1" style="color: #1a9c34;">
          {{ showparentdata.backcontent }}</el-col
        >
      </el-row>
        <el-row>
          <el-col :span="5">图片数</el-col>
          <el-col :span="16" 
            >{{ showparentdata.img }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">图片</el-col>
          <el-col :span="16">
            <div class="block">
              <el-carousel height="250px" >
                <el-carousel-item v-for="(item,index) in photolist" :key="index">
                  <img :src="baseurl+item" alt="" height="250px">
                  
                </el-carousel-item>
              </el-carousel>
            </div>
           
          </el-col>
        </el-row>
      </el-drawer>
      <div v-show="scene === 2">
        <!-- @spusendscene="spusendscene" -->
        <spuindex ref="spu" @gobackscene="gobackscene" :backid = "tempbackid"> </spuindex>
      </div>
    </div>
  </template>
  
  <script>
  import spuindex from "@/views/feedback/feedbackViolationreporting/spuform/index.vue";
  export default {
    name: "",
    data() {
      return {
        baseurl:"https://zyc618.mynatapp.cc",
          isoktockick:false,
        listdata_r: [],
        listdata: [],
        listselect: "",
        isSale: true,
        drawer: false, //抽屉展示与隐藏
        direction: "rtl",
        backid: "",
        showcontent: "",
        showparentdata: {},
        scene: 1,
        rules: {
          backid: {
            rule: /^[0-9]+$/,
            msg: "输入异常..",
          },
        },
        photolist:[],
        tempbackid:0
      };
    },
    components: {
      spuindex,
    },
    methods: {
      //正则校验
      validate(key) {
        let bool = true;
        if (!this.rules[key].rule.test(this[key])) {
          this.$message({
            message: this.rules[key].msg,
            type: "warning",
          });
          bool = false;
          return bool;
        }
        return bool;
      },
      gobackscene(){
          this.scene =1;
          this.getlistdata()
      },
      async updatashop(row) {
          this.scene =2;
          this.tempbackid = row.feeddetailid;
      },
      //下架数据的回调
      async downdatashop(row) {
          this.scene =2;
          this.tempbackid = row.feeddetailid;
  
      },
      //展开详细详情:
      // -照片显示
      clockphotolist(url){
          this.photolist=[]
         this.photolist.push(url.imgurl1);
         this.photolist.push(url.imgurl2);
         this.photolist.push(url.imgurl3);
         this.photolist.push(url.imgurl4);
         this.photolist= this.photolist.filter(str => str.trim() !== "")
      },
      async showshopdetail(row) {
        this.drawer = true;
          
        let result = await this.$API.feedbackViolationreporting.byidgetfeedbackall(
          row.backid || row
        );
        if (result.code === 200&&result.data) {
          this.showparentdata = result.data;
          this.clockphotolist(this.showparentdata)
          console.log(this.showparentdata);
        }else if(! result.data){
        this.drawer = false;
        this.$message({
          message:"错误查询,请输入正确的编号",
          type:"error"
        })
      }else{
          this.showparentdata = row;
          this.clockphotolist(this.showparentdata)
        }
        console.log(this.showparentdata);
      },
      //开发维护
      maintenance(row) {
        this.$message("测试中...");
      },
      //删除按钮的回调
      deletebut(row) {
        this.$message({
          type:"error",
          message:"权限不够禁止删除"
        });
      },
      //获取用户所有数据
      async getlistdata() {
        let result = await this.$API.feedbackViolationreporting.getfeedback();
        if (result.code === 200) {
          
          this.listdata = result.data;
        }
        console.log(this.listdata);
      },
      //根据id号查询数据:
      async byidgetlistdata(backid) {
        if (!this.validate("backid")) {
          this.getlistdata();
          return;
        } else {
          this.showshopdetail(backid);
        }
      },
      //发起修改保存回调
      savecontent() {
        this.$message("开发维护中...");
      },
      //确认关闭？
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      changeinput(value) {},
      //点击增加按钮
      addteacherlist() {
          this.$message({
              type:"error",
              message:"权限不够禁止添加"
          })
          this.isoktockick = true
        // this.$refs.spu.initSpuData(row);
      },
    },
    mounted() {
      this.getlistdata();
    },
    computed: {},
  };
  </script>
  
  <style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .truncate {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 200px; /* 设置宽度 */
  }
  .el-row .el-col-5 {
    font-size: 18px;
    text-align: right;
  }
  .el-col {
    margin: 10px 10px;
    font-size: 14px;
    align-content: center;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  </style>
  